<script setup>
// 无需要额外逻辑，纯展示页面
import { defineProps } from 'vue';
import { listCheckoutmanagement, getCheckoutmanagement, delCheckoutmanagement, addCheckoutmanagement, updateCheckoutmanagement } from "@/api/le/checkoutmanagement"
import { listElderly, getElderlyAll } from "@/api/le/elderly"
import { getUser } from "@/api/system/user"


const msg = ref({})
const elderlyMsg = ref({})
const formatDate = (date) => {
  if (!date || !(date instanceof Date) || isNaN(date)) {
    return '暂无日期'; // 或返回空字符串、默认日期等
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1并补零
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
const formatTimeToDate2 = (timeStr) => {
  if (!timeStr) return '暂无数据';
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
  // 声明接收父组件传递的 allMessage
const props = defineProps({
  allMessage: {
    type: Object,
    required: true
  }
});
const getMsg = () => {
  console.log(props.allMessage.checkOutManagementId);
  if(props.allMessage.checkOutManagementId){

    getCheckoutmanagement(props.allMessage.checkOutManagementId).then(response => {
    msg.value = response.data
    console.log(response);
    getUser(response.data.creator).then(response => { 
      msg.value.creator = response.data.nickName
})
    getElderlyAll(msg.value.elderlyId).then(response => {
      // console.log("全查询结果", response);
      elderlyMsg.value = response.data
      // console.log(elderlyMsg.value);

    })
  })
  }



}
getMsg()
</script>

<template>
  <div class="info-page">
    <!-- 基本信息区域 -->
    <el-card shadow="hover" class="info-card">
      <template #header>
        <div class="card-header">基本信息</div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="单据编号">{{ msg.checkOutNo }}</el-descriptions-item>
        <el-descriptions-item label="老人姓名">{{ elderlyMsg.name }}</el-descriptions-item>
        <el-descriptions-item label="老人身份证号">{{ elderlyMsg.idCard }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ elderlyMsg.contact }}</el-descriptions-item>
        <el-descriptions-item label="费用期限">
          {{ elderlyMsg.checkInManagement ? formatTimeToDate2(elderlyMsg.checkInManagement.feeStartDate) : '暂无数据' }}
          --
          {{ elderlyMsg.checkInManagement ? formatTimeToDate2(elderlyMsg.checkInManagement.feeEndDate) : '暂无数据' }}
        </el-descriptions-item>
        <el-descriptions-item label="护理等级">
          {{ elderlyMsg.nursingLevelYyh ? elderlyMsg.nursingLevelYyh.levelName : '暂无数据' }}
        </el-descriptions-item>
        <el-descriptions-item label="入住床位">
          {{ elderlyMsg.bed ? elderlyMsg.bed.bedNo : '暂无数据' }}
        </el-descriptions-item>
        <el-descriptions-item label="签约合同">
          {{ elderlyMsg.contract ? elderlyMsg.contract.contractName : '暂无数据' }}
        </el-descriptions-item>
        <el-descriptions-item label="养老顾问">{{ elderlyMsg.sysUser?.[0]?.nickName || '暂无数据'
          }}</el-descriptions-item>
        <el-descriptions-item label="护理员">
          <div class="nursing-staff-tags">
            <el-tag style="margin-right: 20px;" v-for="(staff, index) in elderlyMsg.sysUser"
              :key="index" type="info" size="small">
              {{ staff.nickName }}
            </el-tag>
            <!-- 若没有护理员，显示提示文本 -->
            <span v-if="!elderlyMsg.sysUser || elderlyMsg.sysUser === 0"
              class="empty-tip">
              暂无护理员
            </span>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 申请信息区域 -->
    <el-card shadow="hover" class="info-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">申请信息</div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="退住日期">{{ msg.checkOutDate }}</el-descriptions-item>
        <el-descriptions-item label="退住原因">{{ msg.checkOutReason }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ msg.remark }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ msg.creator }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ msg.createTime }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style scoped>
.info-page {
  max-width: 800px;
  margin: 20px auto;
}

.info-card {
  height: fit-content;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}
</style>